<template>
  <div>
    <div class="whole">
      <!--头部-->
      <div class="header">
        <div class="headerOne">
          <!--logo图片-->
          <div class="logo">
            <router-link to="/pay"
              ><img src="./images/cartHeader.png" alt=""
            /></router-link>
          </div>
          <!--个人信息-->
          <div class="logoHan">
            <a href="##" class="logoHanOne">
              <router-link to="/Login">登录</router-link>
              <router-link to="/Register" class="huoWeb">注册</router-link>
              <div class="logohanOneLo"></div>
            </a>
            <a href="##" class="logoHanTwo">[退出]</a>
            <a href="##" class="logoHanTrenn">订单中心</a>
            <div class="logoHanFrom">
              <div></div>
              <i>400-6789-888</i>
            </div>
            <a href="##" class="logoHanFive">
              <div></div>
              <i>在线客服</i>
            </a>
            <a href="##" class="logoHanTen">
              <div></div>
              <i>会员服务</i>
              <a href="##"></a>
            </a>
          </div>
          <div class="logoKn"></div>
        </div>
      </div>
      <!-- <div class="boder">
        <div class="boderOne">
          <div class="boderTwo">
            <div class="boderFor">
              <router-link to="/pay">立即抢购</router-link>
              <a href="##" class="box1">查看订单</a>
            </div>
            <img src="./images/3.jpg" alt="" />
            <div>
              <i class="fuier">购物车空空如也，</i>
              <i>快去抢购心仪商品吧~</i>
            </div>
          </div>
        </div>
      </div> -->
      <shopCartTwo></shopCartTwo>
      <div class="boxName"></div>
      <div class="footer">
        <div class="footerOne">
          <div class="footerTwo">
            <ul>
              <li>关于我们</li>
              <li>About us</li>
              <li>Investor Relations</li>
              <li>媒体报道</li>
              <li>品牌招商</li>
              <li>隐私条款</li>
              <li>唯品诚聘</li>
              <li>唯品卡</li>
              <li>联系我们</li>
              <li>廉正举报</li>
            </ul>
          </div>
          <div class="footerTreen">
            <ul>
              <li>
                Copyright © 2008-2021 vip.com，All Rights Reserved
                使用本网站即表示接受 唯品会用户协议。版权所有
                广州唯品会电子商务有限公司
              </li>
              <li>
                <img src="./images/police_icon.png" alt="" />
                <i
                  >粤公网安备 44010302111111号 粤ICP备08114786号
                  增值业务经营许可证：粤B2-20170777
                  网络文化经营许可证：粤网文〔2018〕5030-1743号</i
                >
              </li>
              <li>
                经营主体证照 风险监测信息
                互联网药品信息服务资格证书：（粤）-经营性-2018-0271
                网络食品交易第三方平台备案凭证：粤B2-20170777
                医疗器械网络交易服务第三方平台备案
              </li>
              <li>
                凭证：（粤）网械平台备字[2019]第00001号
                出版物网络交易平台服务经营备案证：粤新出网备（2021）1号
              </li>
            </ul>
          </div>
          <img
            class="footerFor"
            src="./images/屏幕截图 2021-05-19 200030.png"
            alt=""
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import shopCartTwo from "../../components/shopCartTwo";
export default {
  name: "ShopCart",
  components: {
    shopCartTwo,
  },
};
</script>

<style lang="less" scoped>
.header {
  height: 78px;
  background-color: #fff;
  border-bottom: 2px solid #f3168a;
  margin-bottom: 30px;
  .headerOne {
    width: 960px;
    height: 78px;
    margin: 0 auto;
    position: relative;
    .logoKn {
      width: 445px;
      height: 28px;
      background-color: hotpink;
      position: absolute;
      right: 30px;
      bottom: 8px;
      background-image: url(./images/微信图片_20210519144443.png);
      background-position: 0px 28px;
    }
    .logoHan {
      width: 565.5px;
      height: 26px;
      position: absolute;
      right: 0;
      top: 0;
      margin-top: 10px;
      color: gray;
      font-size: 12px;
      .logoHanTrenn {
        width: 48px;
        height: 14px;
        position: absolute;
        left: 178px;
        top: 6px;
        padding-right: 12px;
        border-right: 1px solid gray;
      }
      .logoHanTen {
        width: 110px;
        height: 14px;
        position: absolute;
        left: 472px;
        top: 6px;
        i {
          height: 14px;
          position: absolute;
          left: 16px;
          top: 0;
          padding-right: 12px;
        }
        div {
          height: 14px;
          width: 14px;
          background-image: url(./images/微信图片_20210519144443.png);
          background-position: 180px 205px;
        }
        a {
          background-image: url(./images/微信图片_20210519144443.png);
          background-position: 34px 242px;
          width: 22px;
          height: 22px;
          display: block;
          position: absolute;
          right: 18px;
          top: -4px;
        }
      }
      .logoHanFive {
        width: 110px;
        height: 14px;
        position: absolute;
        left: 380px;
        top: 6px;
        i {
          height: 14px;
          position: absolute;
          left: 16px;
          top: 0;
          padding-right: 12px;
          border-right: 1px solid gray;
        }
        div {
          height: 14px;
          width: 14px;
          background-image: url(./images/微信图片_20210519144443.png);
          background-position: 180px 205px;
        }
      }
      .logoHanFrom {
        width: 110px;
        height: 14px;
        position: absolute;
        left: 255px;
        top: 6px;
        i {
          height: 14px;
          position: absolute;
          left: 16px;
          top: 0;
          padding-right: 12px;
          border-right: 1px solid gray;
        }
        div {
          height: 14px;
          width: 14px;
          background-image: url(./images/微信图片_20210519144443.png);
          background-position: 180px 205px;
        }
      }
      .logoHanTwo {
        width: 33.19px;
        height: 14px;
        position: absolute;
        left: 130px;
        top: 6px;
      }
      .logoHanOne {
        width: 230.27px;
        height: 26px;
        line-height: 26px;
        position: relative;
        .huoWeb {
          margin-left: 15px;
        }
        .logohanOneLo {
          background-image: url(./images/微信图片_20210519144432.png);
          background-position: 96px 96px;
          width: 22px;
          height: 22px;
          position: absolute;
          left: 95px;
          top: -2.5px;
          border-radius: 50%;
        }
      }
    }
    .logo {
      height: 48px;
      padding: 16px 0 12px;
      width: 350px;
    }
  }
}
.boder {
  .boderOne {
    width: 960px;
    height: 152px;
    // background-color: hotpink;
    margin: 0 auto;
    position: relative;
    .boderTwo {
      width: 294px;
      height: 120px;
      //   background-color: blue;
      position: absolute;
      left: 333px;
      top: 32px;
      .boderFor {
        width: 209px;
        height: 32px;
        line-height: 32px;
        position: absolute;
        right: -65px;
        top: 85px;
        display: flex;
        flex-direction: row;
        .box1 {
          border: 1px solid #c2c2c2;
          margin-left: 9px;
          background-color: #fff;
          color: #333;
        }
        a {
          display: block;
          width: 100px;
          height: 32px;
          background-color: #f10180;
          line-height: 32px;
          text-align: center;
          border: 1px solid #f10180;
          color: #fff;
          font: 15px/30px tahoma, arial, Hiragino Sans GB, WenQuanYi Micro Hei,
            "\5FAE\8F6F\96C5\9ED1", "\5B8B\4F53", sans-serif;
        }
      }
      div {
        // background-color: blueviolet;
        position: absolute;
        display: flex;
        flex-direction: column;
        right: 0;
        top: 0;
        width: 144px;
        margin-bottom: 15px;
        i {
          font-size: 12px;
          height: 32px;
        }
        .fuier {
          font-size: 18px;
          height: 32px;
        }
      }
      img {
        display: block;
        width: 120px;
        height: 120px;
      }
    }
  }
}
.boxName {
  height: 59px;
  border-bottom: 1px solid #ebebeb;
}
.footer {
  .footerOne {
    width: 960px;
    height: 164px;
    // background-color: chartreuse;
    margin: 0 auto;
    margin-top: 35px;
    .footerFor {
      margin: 0 auto;
      width: 551px;
      height: 38px;
      display: block;
    }
    .footerTwo {
      width: 960px;
      height: 30px;
      background-color: #d7237e;
      position: relative;
      ul {
        display: flex;
        width: 617px;
        height: 16px;
        margin: 0 auto;
        text-align: center;
        position: absolute;
        left: 172px;
        top: 7px;
        li {
          margin-left: 2px;
          margin-right: 2px;
          color: #fff;
          text-decoration: none;
          text-align: center;
          border-right: 1px solid #fff;
          padding-right: 4px;
        }
      }
    }
    .footerTreen {
      width: 960px;
      height: 76px;
      // background-color:indigo;
      margin: 14px 0;
      color: gray;
      ul {
        display: flex;
        flex-direction: column;
        li {
          margin: 0 auto;
          margin-bottom: 3px;
        }
      }
    }
  }
}
</style>
